@import './hack.less';

body {
  background: #ff9211;

}

.mt50 {
  margin-top: 50px;
}

.mlf15 {
  box-sizing: content-box;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  height: 172px;
}

.font22 {
  font-size: 22px;
}

#control > .myButton {
  animation: textmove2 1s;
}

#reserve {
  .myButton {
    margin: 2rem auto;
    animation: textmove 1s;
  }
}

.mySelect {
  h3 {
    margin-bottom: 20px;
  }
  .kong{
    text-align: center;
    display: inline-block;
    width: 100%;
  }
  li {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 7px;
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
    box-shadow: 0px 0px 10px #bdbdbd;
    span {
      font-size: 13px;
    }
    hr {
      border:none;
      border-bottom:1px solid #e4e4e4;
    }
    small {
      font-size: 12px;
      color: #5bacd6;
    }
    .status{
      color: #ee970b;
    }
  }
}

.mylist {
  text-align: center;
  li {
    margin-top: 10px;
  }
}

.myaddress {
  li {
    margin-top: 10px;
    margin-left: 2.5%;
    &:nth-of-type(5) input {
      width: 15px;
    }
    input {
      border: none;
      background-color: #fafafa;
      border-bottom: 1px solid rgba(136, 136, 136, 0.77);
      width: 90%;
      padding: 10px;
      &::-webkit-input-placeholder { /* WebKit browsers */
        color: rgba(153, 153, 153, 0.5);
      }
      &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: rgba(153, 153, 153, 0.5);
      }
      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: rgba(153, 153, 153, 0.5);
      }
      &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: rgba(153, 153, 153, 0.5);
      }
      &:focus {
        outline: none;
        //border-bottom: 1px solid #888888;
      }
    }
  }
}

.mt35 {
  margin-top: 35px;
  display: block;
}

.mt20 {
  margin-top: 20px;
}

.addressButton {
  margin: 15px auto;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
  box-shadow: 2px 5px 10px #888888;
  color: white;
  border-radius: 7px;
  width: 70%;
  text-align: center;
  padding: 3px 0px;
}

center {
  color: black !important;
}

@keyframes textmove {
  from {
    transform: translateY(-2rem);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes textmove2 {
  from {
    transform: translateX(1rem);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}